<template>
  <c-pop-box>
    <view class="pr c-check-in bg-color-white border-radius30 overflow">
      <image class="pa bg-back-w" mode="widthFix" src="/static/images/ui_qiandaojiangli.png"></image>
      <view style="padding-top:150upx">
        <view class="padding25">
          <view class="cf">
            <view v-for="(value,index) in list" :key="index" class="fl day-main border-radius10 overflow">
              <!-- 未签到 -->
              <view v-if="index+1 > dayNum">
                <view class=" width97 text-center" style="height:134upx;background-color:#F5F5F5">
                  <view class="dis-flex height35 font-size18 color-block line-height" style="background-color:#ECEBEB">第{{index+1}}天</view>
                  <view class="height76 dis-flex">
                    <view class="width60 height60 dis-flex border-50" style="background-color:#FFBC11">
                      <text class="font-size22 color-white line-height">+1</text>
                    </view>
                  </view>
                  <view class="text-center font-size16">
                    <text style="color:#AEAEAE">未签到</text>
                  </view>
                </view>
              </view>
              <!-- 已签到 -->
              <view v-if="index+1 <= dayNum" style="background-color:#F94F4F">
                <view class="width97 text-center" style="height:134upx;">
                  <view class="dis-flex height35 font-size18 color-white line-height">第{{index+1}}天</view>
                  <view class="height76 dis-flex">
                    <view class="width60 height60 dis-flex border-50" style="background-color:#FFBC11">
                      <text class="font-size22 color-white line-height">+1</text>
                    </view>
                  </view>
                  <view class="text-center font-size16">
                    <text class="color-white">已签到</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="dis-flex margin-bottom30">
            <!-- 未签到 -->
            <view v-if="!isday" @click="btnCheckIn()" class="dis-flex height67 border-radius" style="width:305upx;background-color:#FF5E00">
              <image class="width35 height35" src="/static/images/ui_bofangtubiao.png"></image>
              <text class="margin-left20 line-height color-white font-size26">签到领取</text>
            </view>
            <!-- 签到成功 -->
            <view v-if="isday" class="dis-flex height67 border-radius" style="width:305upx;background-color:#ACACAC">
              <image class="width35 height35" src="/static/images/ui_bofangtubiao.png"></image>
              <text class="margin-left20 line-height color-white font-size26">签到成功</text>
            </view>
          </view>
          <view class="dis-flex">
            <text class="font-size26">观看15s视频签到成功</text>
          </view>
        </view>
      </view>
    </view>
  </c-pop-box>
</template>
<script>
import CPopBox from '@/components/global/c-pop/c-pop-box';
import { mapActions } from 'vuex';
export default {
  name: 'c-check-in',
  props: {
    d: {
      type: Object
    }
  },
  components: {
    CPopBox
  },
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7],
      dayNum: 0, // 已经签到天数
      isday: false // 今天是否签到
    };
  },
  watch: {},
  computed: {},
  methods: {
    ...mapActions('user', ['gameInfoUp']),
    btnCheckIn() {
      console.log('签到btn');
	  this.$store.dispatch('videoAd/show',{
	    success:()=> {
			this.saveUserSign();
	    },
	    fail:()=> {
          uni.showToast({
            title: '播放失败',
            icon: 'none'
          });
	    }
	  });
    },
    // 获取签到列表
    async getUserSign() {
      let res = await this.$api.home.getUserSign();
      this.isday = res.code != -1;
      this.dayNum = (res.data && res.data.counts) || 0;
    },
    // 签到
    async saveUserSign() {
      let res = await this.$api.home.saveUserSign();
      console.log(res);
      this.isday = res.code != -1;
      this.dayNum = (res.data && res.data.counts) || 0;
      this.gameInfoUp();
    }
  },
  created() {},
  mounted() {
    this.getUserSign();
  }
};
</script>
<style lang="scss" scoped>
.c-check-in {
  width: 518upx;
  min-height: 622upx;
  .day-main {
    margin-right: 28upx;
    margin-bottom: 20upx;
    &:nth-child(4) {
      margin-right: 0;
    }
    &:nth-child(5) {
      margin-left: (97upx/2);
    }
  }
}
</style>
